<script setup>
import { ref } from 'vue'
import { QuillEditor } from "@vueup/vue-quill";
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import { useTokenStore } from "@/stores/token.js";
import {scheduleAddService, scheduleUpdateService} from "@/api/schedule.js";
import {ElMessage} from "element-plus";

// 日程类型数据模型，初始化数据
const scheduleTypes = ref([
    {
        "id": 1,
        "typeName": "重要紧急",
    },
    {
        "id": 2,
        "typeName": "重要不紧急",
    },
    {
        "id": 3,
        "typeName": "紧急不重要",
    },
    {
        "id": 4,
        "typeName": "不重要不紧急",
    }
])

const props = defineProps({
    visible: {
        type: Boolean,
        required: true
    },
    title: {
        type: String,
        required: true
    },
    categories: {
        type: Array,
        required: true
    },
    scheduleTypes: {
        type: Array,
        required: true
    },
    scheduleModel: {
        type: Object,
        required: true
    },
    onScheduleList: {
        type: Function,
        required: true
    }
})

const emit = defineEmits(['update:visible', 'addSchedule', 'updateSchedule', 'cancel'])

const tokenStore = useTokenStore()

const handlePublish = (state) => {
    if (props.title === '添加日程') {
        addSchedule(state)
    } else {
        updateSchedule(state)
    }
}

const drawerCancel = () => {
    emit('cancel')
}

const addSchedule = async () => {
    try {
        const newScheduleModel = { ...props.scheduleModel }
        const result = await scheduleAddService(newScheduleModel)
        ElMessage.success(result.msg || '添加成功')
        emit('addSchedule', result)
        emit('update:visible', false)
    } catch (error) {
        ElMessage.error('添加日程失败')
        console.error('添加日程失败:', error)
    }
}

const updateSchedule = async () => {
    try {
        const updatedScheduleModel = { ...props.scheduleModel }
        const result = await scheduleUpdateService(updatedScheduleModel)
        ElMessage.success(result.msg || '修改成功')
        emit('updateSchedule', result)
        emit('update:visible', false)
    } catch (error) {
        ElMessage.error('更新日程失败')
        console.error('更新日程失败：', error)
    }
}
</script>

<template>
    <el-drawer
        :model-value="visible"
        :title="title"
        direction="rtl"
        size="50%"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :show-close="false"
        @update:model-value="val => emit('update:visible', val)"
    >
        <!-- 添加日程表单 -->
        <el-form :model="scheduleModel" label-width="100px">
            <el-form-item label="日程标题">
                <el-input v-model="scheduleModel.title" placeholder="请输入标题"></el-input>
            </el-form-item>
            <el-form-item label="日程分类">
                <el-select placeholder="请选择" v-model="scheduleModel.categoryId">
                    <el-option
                        v-for="c in categories"
                        :key="c.id"
                        :label="c.categoryName"
                        :value="c.id"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="日程类型">
                <el-select placeholder="请选择" v-model="scheduleModel.emergencyDegree">
                    <el-option
                        v-for="t in scheduleTypes"
                        :key="t.id"
                        :label="t.typeName"
                        :value="t.id"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="提醒时间">
                <el-date-picker
                    v-model="scheduleModel.remindTime"
                    type="datetime"
                    placeholder="选择提醒时间"
                ></el-date-picker>
            </el-form-item>
            <el-form-item label="日程内容">
                <div class="editor">
                    <quill-editor
                        theme="snow"
                        v-model:content="scheduleModel.content"
                        contentType="html"
                    >
                    </quill-editor>
                </div>
            </el-form-item>
            <!-- 新增状态选择 -->
            <el-form-item label="日程状态">
                <el-select placeholder="请选择" v-model="scheduleModel.state">
                    <el-option label="未完成" :value="0"></el-option>
                    <el-option label="已完成" :value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handlePublish">保存</el-button>
                <el-button @click="drawerCancel">取消</el-button>
            </el-form-item>
        </el-form>
    </el-drawer>
</template>

<style lang="scss" scoped>
.editor {
    width: 100%;

    :deep(.ql-editor) {
        min-height: 200px;
    }
}
</style>
